<template>
      <div id="lg">
            <div class="one">
                  <div class="item" v-for="(item, index) in list" :key="index">
                        <img :src="item.icon" alt="">
                        <div class="info">
                              <div class="name">{{item.name}}</div>
                              <div class="txt">{{item.txt}}</div>
                        </div>
                  </div>
            </div>

            <div class="two">
                  <div class="title">合作优势</div>
                  <div class="box">
                        <div class="item" v-for="(item, index) in youshi" :key="index">
                              <img :src="item.icon" alt="">
                              <div class="name">
                                    {{ item.name }}
                              </div>
                              <div class="txt">
                                    {{ item.txt }}
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    icon: require("../../assets/img/d1.png"),
                                    name: "资金安全",
                                    txt: "保障商户资金安全性"
                              },
                              {
                                    icon: require("../../assets/img/d2.png"),
                                    name: "技术研发",
                                    txt: "专业服务器运维团队"
                              },
                              {
                                    icon: require("../../assets/img/d3.png"),
                                    name: "解决方案",
                                    txt: "完善的支付行业解决方案"
                              },
                              {
                                    icon: require("../../assets/img/d4.png"),
                                    name: "落地服务",
                                    txt: "帮助合作伙伴快速推进市场"
                              },
                        ],
                        youshi: [
                              {
                                    icon: require("../../assets/img/d5.png"),
                                    name: "产品支持",
                                    txt: "专业研发团队及时反馈合作商需求"
                              },
                              {
                                    icon: require("../../assets/img/d6.png"),
                                    name: "物料支持",
                                    txt: "提供付呗产品的营销课程及产品操作手册"
                              },
                              {
                                    icon: require("../../assets/img/d7.png"),
                                    name: "市场支持",
                                    txt: "提供付呗产品的活动政策、营销推广、代理运营建议"
                              },
                              {
                                    icon: require("../../assets/img/d7.png"),
                                    name: "方案支持",
                                    txt: "为全国合作商提供行业解决方案支持"
                              },
                              {
                                    icon: require("../../assets/img/d7.png"),
                                    name: "资源支持",
                                    txt: "为代理商提供大客户解决方案，具体费用根据项目而定"
                              },
                              {
                                    icon: require("../../assets/img/d7.png"),
                                    name: "推广支持",
                                    txt: "通过网络推广得到的资源转交给当地合作商"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#lg {
      width: 1920px;
      margin: 80px auto  0 auto;

      .one {
            width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .item {
                  width: 600px;
                  display: flex;
                  // flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  margin: 30px 0;
                  .info {
                        text-align: center;
                        width: 300px;
                        .name {
                              font-size: 36px;
                        }
                        .txt {
                              font-size: 24px;
                              margin: 10px 0;
                        }
                  }
            }
      }
      .two {

            width: 1440px;
            margin: 30px auto;
            .title {
                  font-size: 30px;
                  text-align: center;
            }
            .box {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-top: 50px;
                  .item {
                        width: 166px;
                        height: 286px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        border: 1px solid #dfdfdf;
                        padding-top: 30px;
                        transition:  all 0.5s linear;
                        &:hover {
                              border-color: #2b40cc;
                        }
                        .name {
                              margin: 20px 0;
                              font-size: 24px;
                        }
                        .txt {
                              padding: 0 10px;
                              text-align: center;
                              font-size: 18px;
                        }
                  }
            }
      }
}
</style>